<!--
 * @Descripttion: 用户分组关联角色
 * @Author: YuZhenJing
 * @Date: 2020-01-12 12:01:01
 * @LastEditors: YuZhenJing
 * @LastEditTime: 2020-03-20 15:34:05
 -->
<template>
  <div class="user-group-role">
    <tf-dialog
      :title="windowInfo.title"
      :title-icon="windowInfo.titleIcon"
      :visible.sync="tfVisible"
    >
      <template v-slot:content>
        <div style="text-align: center">
          <el-transfer
            :data="roleData"
            :titles="['可选角色', '已选角色']"
            style="text-align: left; display: inline-block"
            v-model="selectedData"
          ></el-transfer>
        </div>
      </template>
      <template v-slot:footer>
        <el-row :gutter="12" style="padding:5px;">
          <el-col :span="24" style="text-align:center">
            <el-button
              :loading="saveLoading"
              @click="submitForm"
              icon="el-icon-circle-plus-outline"
              type="primary"
              >保存</el-button
            >
          </el-col>
        </el-row>
      </template>
    </tf-dialog>
  </div>
</template>
<script>
import { getRoleByExecute } from '@/service/roles'
export default {
  components: {
    'tf-dialog': require('@/components/common/dialog/TfDialog').default
  },
  data() {
    return {
      // 窗体信息
      windowInfo: {
        titleIcon: 'el-icon-s-operation',
        title: '用户分组角色分配'
      },
      saveLoading: false,
      tfVisible: false,
      userGroupId: '',
      roleData: [],
      selectedData: []
    }
  },
  methods: {
    getRoleByExecute,
    show(userGroupInfo) {
      if (userGroupInfo && userGroupInfo.userGroupId != '') {
        this.userGroupId = userGroupInfo.userGroupId
        this.getRoleByExecute(() => {
          this.getRoleByUserGroup()
        })
        this.tfVisible = true
      } else {
        this.$alert('用户分组编码不能为空，无法设置角色', '提示', {
          type: 'warning',
          confirmButtonText: '确定'
        })
      }
    },
    // 获取用户分组已经设置的角色信息
    getRoleByUserGroup() {
      const options = this.$html.get(
        'user/group/roleByUserGroup/' + this.userGroupId
      )
      options
        .then(data => {
          if (data.returnType == 'success') {
            this.selectedData = data.returnData
          }
        })
        .catch(() => {
          console.log('error:userGroupRole/getRoleByUserGroup')
        })
    },
    // 提交表单保存用户分组角色信息
    submitForm() {
      this.saveLoading = true
      let userGroupRoleData = {
        userGroupId: this.userGroupId,
        roleIds: this.selectedData
      }
      let saveJoin = this.$html.postJson(
        'user/group/saveUserGroupRole',
        userGroupRoleData
      )
      saveJoin
        .then(data => {
          if (data.returnType == 'success') {
            this.saveLoading = false
            this.$notify({
              title: '成功',
              message: '保存成功',
              type: 'success'
            })
            this.tfVisible = false
          }
        })
        .catch(error => {
          this.saveLoading = false
          console.log('error:userGroupRole/submitForm', error)
        })
    }
  }
}
</script>
